<template>

  <div class="app-container" >
    <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="addCatalog">
      新增分类
    </el-button>
    <div style="display:flex;justify-content: space-between;margin-top: 30px">

      <el-tree class="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      <div style="width:100%;margin-left:50px">


        <el-form :model="catalog" label-width="80px" label-position="left">
          <el-form-item label="父分类" v-if="isEdit === false" >
            <div style="display:flex;justify-content: left;">
              <el-input v-model="catalog.parent.name" disabled placeholder="父分类" style="width:170px"/>
              <el-button @click="showParent" style="margin-left: 10px">选择</el-button>
            </div>
          </el-form-item>
          <el-form-item label="分类名称">
            <el-input v-model="catalog.name" placeholder="分类名称" style="width:250px" />
          </el-form-item>
<!--          <el-form-item label="分类状态">-->
<!--            <el-input v-model="catalog.status" placeholder="分类状态" />-->
<!--          </el-form-item>-->
          <el-form-item label="分类排序">
            <el-input v-model="catalog.sortOrder" placeholder="分类排序" style="width:250px"/>
          </el-form-item>
          <el-form-item label="分类图片">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8280/file"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="catalog.picUrl" :src="catalog.picUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>

          </el-form-item>
        </el-form>

        <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="saveCatalog">
          保存修改
        </el-button>

        <el-button v-if="isEdit" class="filter-item" style="margin-left: 10px;" type="primary" @click="deleteCatalog">
          删除分类
        </el-button>
      </div>

      <el-dialog :visible.sync="dialogVisible" title="选择父分类">
            <el-tree
              :data="notLeafData"
              :props="defaultProps"
              @node-click="selectParentNode"
            />
        <el-button @click="confirmSelect">确定</el-button>
      </el-dialog>


    </div>



  </div>
</template>

<script>
  import { getAllCatalog, getNotLeafCatalog, saveCatalog, deleteCatalog } from '@/api/catalog'

  const defaultCatalog = {
    name: '',
    picUrl: '',
    sortOrder: '',
    status: '',
    level:1,
    parent: {id:'0',name:'无'}
  }

  export default {
    data() {

      return {
        isEdit: false,
        data: [],
        notLeafData: [],
        dialogVisible:false,
        catalog: Object.assign({}, defaultCatalog),
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };

    },
    created() {
      this.fecthData()
    },

    methods: {
      fecthData() {
        getAllCatalog().then(r1 => {
          this.data = r1.data
          console.log("获取全部分类",r1.data)
        });
        getNotLeafCatalog().then(r1=>{
          this.notLeafData = r1.data
        })
      },
      handleNodeClick(data) {
        console.log(data)
        this.isEdit = true
        this.catalog = data
      },
      handleAvatarSuccess(e) {
        console.log('成功', e)
        this.catalog.picUrl = e.data.url
      },
      addCatalog(){
        console.log("新增分类")
        this.catalog = Object.assign({}, defaultCatalog)
        this.isEdit = false
      },
      saveCatalog(){
        let that =this
        //设置parentId
        if(!this.isEdit) {
          //新增
          this.catalog.parentId = this.catalog.parent.id
        }
        console.log("保存分类",this.catalog)
        saveCatalog(this.catalog).then(r1=>{
          console.log("保存分类成功")
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          that.fecthData()
        })
      },
      showParent(){
        this.dialogVisible = true
      },
      confirmSelect(){
        console.log("确定选择")
        this.dialogVisible = false
      },
      selectParentNode(data){

        this.catalog.parent = data
        this.catalog.level = data.level + 1
        console.log("选择父类",this.catalog.parent)
      },

      deleteCatalog() {
        let that = this
        this.$confirm('确定要删除该分类?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            await deleteCatalog(this.catalog)
            that.fecthData()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
          .catch(err => { console.error(err) })
      },
    }
  };
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .tree {
    width: 300px
  }

  /*图片*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px solid #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    border: 1px solid #d9d9d9;
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
